<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<!-- <image src="../../../static/left.png" style="position: fixed;top: 80upx;left: 20upx;width: 50upx;" mode="widthFix" @click="navBack"></image> -->
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">鸿善智家</view>
			<view class="welcome">
				找回密码
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input 
						type="number" 
						:value="mobile" 
						placeholder="请输入您的手机号码"
						maxlength="11"
						data-key="mobile"
						@input="mobileInput"
					/>
				</view>
				<view class="input-item">
					<text class="tit">图形码</text>
					<view style="display: flex;height: 300upx;">
						<input type="text" class="flex" value="" @input="imgcodeInput" placeholder="请输入图形验证码" />
						<image style="width: 200upx;height: 80upx;margin-top: -30upx;margin-left: 50upx;" @click="changeImg" :src="'http://hszj.hongshantang696.com//web/index.php?c=utility&a=code&r='+timestamp"></image>
					</view>
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<view style="display: flex;height: 300upx;">
						<input type="number" @input="verify" class="flex" maxlength="5" value="" placeholder="请输入5位短信验证码" />
						<button style="width: 200upx;height: 70upx;margin-top: -20upx;font-size: 28upx;line-height: 70upx;background-color: #d01819;margin-left: 50upx;color: #fff;" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
					</view>
				</view>
				<view class="input-item">
					<text class="tit">新登录密码</text>
					<input 
						type="mobile" 
						value="" 
						placeholder="6-18位不含特殊字符的数字、字母组合"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						data-key="pwd"
						@input="pwdInput"
					/>
				</view>
				<view class="input-item">
					<text class="tit">确认新登录密码</text>
					<input 
						type="mobile" 
						value="" 
						placeholder="6-18位不含特殊字符的数字、字母组合"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						data-key="pwd"
						@input="pwd2Input"
					/>
				</view>
			</view>
			<button class="confirm-btn" @click="forget" style="background-color: #d01819;" :disabled="loading">立即找回</button>
			<view class="forget-section" @click="backlogin">
				返回登录
			</view>
		</view>
		<!-- <view class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view> -->
		<!-- <view class="action-row">
			<navigator url="../reg/reg">注册账号</navigator>
			<text>|</text>
			<navigator url="../pwd/pwd">忘记密码</navigator>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				area:true,
				top: false,
				loading: false,
				codebtn: false,
				mobile: '',
				pwd: '',
				pwd1: '',
				imgcode: "",
				verifycode: '',
				codetext: '获取验证码',
				systemInfo:{},
				codenum: 60
			};
		},
		onLoad:function(){
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
				}
			})
			var timestamp = (new Date()).getTime();
			this.timestamp = timestamp
		},
		methods:{
			change(e) {
				if (e.currentTarget.dataset.id == 1) {
					this.area = false
					this.top = true
				} else {
					uni.showToast({
						title: '请联系管理员',
						icon: "none"
					});
				}
			},
			backlogin() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			forget(){
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none"
					});
				} else if (this.pwd1 == "") {
					uni.showToast({
						title: '请确认登录密码',
						icon: "none"  
					});
					
				} else if (this.verifycode == "") {
					uni.showToast({
						title: '请输入短信验证码',
						icon: "none"
					});
				} else {
					this.loading = true
					uni.request({
						url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.forget&type=0&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							pwd: this.pwd,
							pwd1: this.pwd1,
							verifycode: this.verifycode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.loading = false
							console.log(JSON.stringify(res)) 
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								setTimeout(()=>{
									uni.reLaunch({
										url:"../login"
									})
								},1500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			mobileInput(e) {
				this.mobile = e.target.value
			},
			imgcodeInput(e) {
				this.imgcode = e.target.value
			},
			pwd2Input(e) {
				this.pwd1 = e.target.value
			},
			pwdInput(e) {
				this.pwd = e.target.value
			},
			verify(e) {
				this.verifycode = e.target.value
			},
			changeImg() {
				var timestamp = (new Date()).getTime();
				this.timestamp = timestamp
			},
			getcode(){
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.imgcode == "") {
					uni.showToast({
						title: '请输入图形验证码',
						icon: "none"
					});
				} else {
					uni.request({
						url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_forget',
							imgcode: this.imgcode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	  color: $uni-color-error;
		font-size: 26upx;
	}
	
	.action-row navigator {
	  color: $uni-color-error;
		padding: 0 10px;
	}
	.container{
		padding-top: 115px;
		position:relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		/* color: $font-color-dark; */
	}
	.left-top-sign{
		font-size: 120upx;
		color: #f3f3f3;
		position:relative;
		left: 50upx;
		top: -100upx;
	}
	.right-top-sign{
		position:absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
		&:before, &:after{
			display:block;
			content:"";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}
		&:before{
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
		&:after{
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
	.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.input-content{
		padding: 0 60upx;
	}
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:#f8f6fc;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: 26upx;
			color: #606266;
		}
		input{
			height: 60upx;
			font-size: 30upx;
			color: #303133;
			width: 100%;
		}	
	}

	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-error;
		color: #fff;
		font-size: 32upx;
		&:after{
			border-radius: 100px;
		}
	}
	.forget-section{
		font-size: 26upx;
		color: #4399fc;
		text-align: center;
		margin-top: 40upx;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: 26upx;
		color: #606266;
		text-align: center;
		text{
			color: #4399fc;
			margin-left: 10upx;
		}
	}
</style>
